<template>
	<view>
		<!-- 密码登录 -->
		<view v-if="show">
			<view class="title">
				<view>你好,</view>
				<view>欢迎来到社区在线</view>
			</view>
			<view class="input-box">
				<input type="number" placeholder="请输入手机号" v-model="phone" @input="phoneinput"/>
			</view>
			<view class="input-box">
				<input type="password" placeholder="请输入密码" v-model="password"/>
			</view>
			<view class="forget">
				<text @click="forgetpwd">忘记密码</text>
				<text @click="phoneLogin">验证码登录</text>
			</view>
			<view class="login"  @click="$u.throttle(mlogin,1000)">登录</view>
			<!-- #ifdef APP-PLUS -->
			<view class="zhiwen" @click="zhiwen" v-if="checked==true">指纹登录</view>
			<!-- #endif -->
			<view class="register" @click="goRegister">注册</view>
		</view>
		<!-- 手机号登录 -->
		<view v-else>
			<view class="title">
				<view>你好,</view>
				<view>欢迎来到社区在线</view>
			</view>
			<view class="input-box">
				<input type="number" placeholder="请输入手机号" v-model="phone" @input="phoneinput"/>
			</view>
			<view class="input-box">
				<input type="number" placeholder="请输入验证码" v-model="smsVerifyCode" />
				<text class="getcode"  @click="getma">{{ma}}</text>
			</view>
			<view class="forget">
				<text @click="forgetpwd">忘记密码</text>
				<text @click="pwdLogin">密码登录</text>
			</view>
			<view class="login"  @click="$u.throttle(smslogin,1000)">登录</view>
			<!-- #ifdef APP-PLUS -->
			<view class="zhiwen" @click="zhiwen" v-if="checked==true">指纹登录</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {login,smslogin,getsms,zwlogin} from"../../api/login.js"
	export default{
		data(){
			return{
				show:true,
				ma: "获取验证码",
				phone:"",
				password:"",
				smsVerifyCode:'',
				back:false,
				checked:false,
				checkPhone:''
			}
		},
		onLoad(e) {
			if(e.type){
				this.back=true
			}
			if(uni.getStorageSync("userInfo")){
				uni.removeStorageSync("userInfo")
			}
		},
		onShow() {
			if(uni.getStorageSync('phone')){
				this.phone=uni.getStorageSync('phone')
				this.checkPhone=uni.getStorageSync('phone')
			}
			// 检查是否开启了指纹登录
			if (uni.getStorageSync("openzw") && uni.getStorageSync("openzw") == true) {
				this.checked = true
			}
		},
		methods:{
			phoneinput(e){
				let phone=e.detail.value
				if(this.checkPhone==phone){
					this.checked=true
				}else{
					this.checked=false
				}
			},
			// 跳转免密码登录
			phoneLogin(){
				this.show=false
			},
			// 跳转密码登录
			pwdLogin(){
				this.show=true
			},
			// 跳转到注册页面
			goRegister(){
				uni.navigateTo({
					url:"./register"
				})
			},
			forgetpwd(){
				uni.navigateTo({
					url:"./forgetpwd"
				})
			},
			// 密码登录
			async mlogin(){
				if(this.phone.trim()==""){
					this.msg("手机号未填写","none")
					return
				}
				if(this.password.trim()==""){
					this.msg("密码未填写","none")
					return
				}
				uni.showLoading({
					title:"登录中..."
				})
				let res=await this.post(login,{phone:this.phone,password:this.password})
				uni.setStorageSync("userInfo",res.data)
				uni.setStorageSync("phone",this.phone)
				this.judge()
				this.msg("登录成功")
				setTimeout(()=>{
					this.navnack()
				},1000)
			},
			navnack(){
				if(this.back==true){
					uni.navigateBack({
						delta:1
					})
				}else{
					uni.switchTab({
						url:"/pages/user/user"
					})
				}
			},
			// 判断是否切换了手机号,如果切换手机号，将指纹功能销毁
			judge(){
				if(this.phone!=this.checkPhone){
					uni.removeStorageSync('openzw')
					uni.removeStorageSync('openpay')
				}
			},
			// 指纹登录
			zhiwen(){
				if(this.phone.trim()==""){
					this.msg("手机号未填写","none")
					return
				}
				// 开始指纹识别
				uni.startSoterAuthentication({
					requestAuthModes: ['fingerPrint'],
					challenge: '123456',
					authContent: '请验证本机指纹',
					success:(res)=> {
						console.log('成功',res);
						if(res.errCode==0){
							uni.showLoading({
								title:"登录中..."
							})
							this.post(zwlogin,{phone:this.phone}).then(res=>{
								uni.setStorageSync("userInfo",res.data)
								uni.setStorageSync("phone",this.phone)
								this.msg("登录成功")
								setTimeout(()=>{
									this.navnack()
								},1000)
							})
						}
					},
					fail:(res)=> {
						console.log('失败',res);
						if(res.errCode==90001){
							this.msg('本设备不支持生物认证','none')
						}
						if(res.errCode==90002){
							this.msg('用户未授权使用该生物认证接口','none')
						}
						if(res.errCode==90003){
							this.msg('请求使用的生物认证方式不支持','none')
						}
						if(res.errCode==90007){
							this.msg('内部错误','none')
						}
						if(res.errCode==90008){
							this.msg('用户取消授权','none')
						}
						if(res.errCode==90009){
							this.msg('识别失败','none')
						}
						if(res.errCode==90010){
							this.msg('重试次数过多被冻结','none')
						}
						if(res.errCode==90011){
							this.msg('用户未录入所选识别方式','none')
						}
					},
					complete(res) {
						console.log('结束',res);
					}
				})
			},
			// 验证码登录
			async smslogin(){
				if(this.phone.trim()==""){
					this.msg("手机号未填写","none")
					return
				}
				if(this.smsVerifyCode.trim()==""){
					this.msg("验证码未填写","none")
					return
				}
				uni.showLoading({
					title:"登录中..."
				})
				let res=await this.post(smslogin,{phone:this.phone,smsVerifyCode:this.smsVerifyCode})
				uni.setStorageSync("userInfo",res.data)
				uni.setStorageSync("phone",this.phone)
				this.judge()
				this.msg("登录成功")
				setTimeout(()=>{
					this.navnack()
				},1000)
			},
			// 获取验证码
			async getma() {
				if (this.ma == "获取验证码") {
					if (this.$u.test.mobile(this.phone)) {
						let res=await this.get(getsms,{mobile:this.phone})
						// 在此发送异步
						this.msg("验证码发送成功")
						if (this.ma == "获取验证码") {
							let time = 59;
							let timer = setInterval(() => {
								if (time === 0) {
									clearInterval(timer);
									this.ma = "获取验证码"
								} else {
									this.ma = time + "s后获取";
									time--
								}
							}, 1000);
						}
					} else {
						this.msg("手机号未填写或格式不对", "none")
					}
				} else {
					this.msg("稍后重试", "none")
				}
			},
		}
	}
</script>

<style>
	.title{
		margin-top: 108rpx;
		margin-left: 78rpx;
		font-size: 50rpx;
		font-weight: 400;
		color: #000000;
	}
	.input-box{
		width: 594rpx;
		margin: 90rpx auto 0;
		border-bottom: 1px solid #E4E4E4;
		padding-bottom: 20rpx;
		font-size: 30rpx;
		color: #333;
		display: flex;
		justify-content: space-between;
	}
	.forget{
		width: 594rpx;
		margin: 60rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #999999;
	}
	.login{
		width: 594rpx;
		height: 80rpx;
		margin: 125rpx auto 0;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.zhiwen{
		width: 594rpx;
		height: 80rpx;
		margin: 20rpx auto 0;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.register{
		margin: 30rpx auto;
		width: 594rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333333;
	}
	.getcode{
		font-size: 26rpx;
		color: #F09238;
	}
</style>
